import './hu1Three'
import "../../css/Niux/hu.css"
import Bus from "./eventBus"
import { useEffect, useRef ,useState} from 'react';
import { useNavigate } from 'react-router-dom';
const Hu1 = () => {
    let keyArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0]
    let [dats,setDats] = useState('')
    let navigate = useNavigate();
    const divRef = useRef(null);
    useEffect(() => {
        // 在组件挂载完成后，可以通过divRef.current访问到目标元素
        if (divRef.current) {
            console.log(divRef.current);
        }
    }, []);
    let getzhi = (val) => {
        if(typeof(val)  == 'number' || val == '.'){
            setDats(dats+=val)
        }
    }
    let fn = ()=>{
        Bus.publish(dats)
        setDats('')
    }

    let addName = () => {
        const text = prompt("请输入要显示的文字：");
        Bus.publish(text)
    }

    let del = () => {
        setDats(dats.substring(0, dats.length - 1))
    }

    let save = () => {
        Bus.publish(true)
        navigate('/Niux/submit')
    }

    return (
        <>
            <div id="keyboard">
                <input type="text" value={dats} onChange={()=>{console.log("")}} />
                <div id='keyWord'>
                    <div id="keyBox1">
                        {
                            keyArr.map((item, index) => {
                                return <div className="key" key={index} onClick={()=>getzhi(item)}>{item}</div>
                            })
                        }
                        <div className="key" onClick={save}>保存</div>
                    </div>
                    <div id='keyBox2'>
                        <div className="del" onClick={del}>X</div>
                        <div className="affirm" onClick={fn}>确认</div>
                        <div className="affirm" onClick={addName}>添加名称</div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Hu1